import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    ToastAndroid
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import FetchNetDataComponent from "./FetchNetDataComponent";
import ScrollableTabView from "react-native-scrollable-tab-view";
import MyNav from "../extendsComponent/MyNav";
class Collect extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                  i am Collect
                </Text>
            </View>
        )
    }
}

class Mine extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                 i am Mine
                </Text>
            </View>
        )
    }
}
export default class MyTabNavigator extends Component {
    state = {
        selectedTab: '首页'
    };
    rightbutton=()=>{
        ToastAndroid.show("显示更多项",ToastAndroid.SHORT);
    }
    searchBtn=()=>{
        ToastAndroid.show("显示搜索项",ToastAndroid.SHORT);
    }
    editBtn=()=>{
        ToastAndroid.show("显示编辑项",ToastAndroid.SHORT);
    }
    render() {
        return (
            <View style={styles.container} >
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/home_default.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../res/home_selected.png")} />}
                        onPress={() =>
                            this.setState({ selectedTab: '首页' })
                        }>
                        <ScrollableTabView
                            tabBarBackgroundColor="#63B8FF"
                            tabBarActiveTextColor="#FFF"
                            tabBarInactiveTextColor="#F5FFFA"
                            tabBarUnderlineStyle={{backgroundColor: "#E7E7E7", height: 2}}>
                            <View tabLabel='IOS'>
                                <FetchNetDataComponent navigation={this.props.navigation}/>
                            </View>
                            <Text tabLabel='Android'>我是android页</Text>
                            <Text tabLabel='Java'>我是java页</Text>
                            <Text tabLabel='js'>我是js页</Text>
                            <Text tabLabel='C#'>我是C#页</Text>
                            <Text tabLabel='python'>我是Python页</Text>
                        </ScrollableTabView>
                    </TabNavigator.Item>

                    <TabNavigator.Item
                        selected={this.state.selectedTab === '新闻'}
                        title="新闻"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/find_default.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../res/find_selected.png")} />}
                        onPress={() =>
                            this.setState({ selectedTab: '新闻' })
                        }>
                        <View>
                            <MyNav
                                title={"新闻"}
                                color={"#1aa1e5"}
                                textColor={"white"}
                                rightBtnTitle={"更多"}
                                rightBtnTitleColor={"white"}
                                stateType={'1'}
                                rightbutton={this.rightbutton.bind(this)}
                            />
                            <FetchNetDataComponent navigation={this.props.navigation}/>
                        </View>

                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '收藏'}
                        title="收藏"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/contact_default.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../res/contact_selected.png")} />}
                        onPress={() => this.setState({ selectedTab: '收藏' })}>
                        <View>
                            <MyNav
                                title={"收藏"}
                                color={"#1aa1e5"}
                                textColor={"white"}
                                stateType={'2'}
                                rightbutton={this.rightbutton.bind(this)}
                                editBtn={this.editBtn.bind(this)}
                                searchBtn={this.searchBtn.bind(this)}
                            />
                            <Collect/>
                        </View>

                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '我的'}
                        title="我的"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("../res/mine_default.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("../res/mine_selected.png")} />}
                        onPress={() => this.setState({ selectedTab: '我的' })}>
                        <View>
                            <MyNav
                                title={"我的"}
                                color={"#1aa1e5"}
                                textColor={"white"}
                            />
                            <Mine/>
                        </View>
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
}


let styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    tabText: {
        color: "#000000",
        fontSize: 13
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});